@extends('admin.tableLayout')
@section('title','摄影与绘画列表')
@section('barName','摄影与绘画列表')
@php
    $config=config('admin.writing');
    $display=config('admin.isDisplay');
@endphp
@section('quote')

   <form class="layui-form" >
        <label>显示状态：</label>
        <div class="layui-inline">
            <select name="is_display"  id="is_display" lay-search >
                <option value="">全部</option>
                @foreach($display as $k=>$v)
                    <option value="{{$k}}" @if(isset($is_display)&&$is_display==$k) selected @endif>{{$v}}</option>
                @endforeach
            </select>

        </div>
        <label>所属栏目：</label>
        <div class="layui-inline">
            <select name="category_id"  id="category_id" lay-search lay-filter="select">
                <option value="">全部</option>
                @foreach($config as $k=>$v)
                    <option value="{{$k}}" @if(isset($category_id)&&$category_id==$k) selected @endif>{{$v}}</option>
                @endforeach
            </select>

        </div>
        <div id="select" class="layui-inline"></div>

        <div class="layui-inline">
            <input type="text" class="layui-input" width="200px" id="datetime" name="searchTime" value="{{$searchTime or ''}}" placeholder="日期范围搜索">
        </div>
        <div class="layui-inline">
            <input type="text" name="searchKey" placeholder="作品名称查询" autocomplete="off" value="{{$searchKey or ''}}" class="layui-input">
        </div>
        <button lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
    </form>
@endsection

@section('checkbox_btn')
    <script type="text/html" id="theme">
        @{{#  if(d.theme==undefined){ }}
            无主题状态
        @{{#  } else { }}
         @{{ d.theme.name }}
        @{{#  } }}
    </script>
    <script type="text/html" id="author">
        @{{#  if(d.user==undefined){ }}
            用户不存在
        @{{#  } else { }}
        @{{ d.user.name }}
        @{{#  } }}
    </script>
    @can('writing_display')
    <button class="layui-btn" data-type="displayAll">批量屏蔽选中项目</button>
    <button class="layui-btn" data-type="showAll">批量显示选中项目</button>
    @endcan
    @can('writing_del')
    <button class="layui-btn" data-type="getCheckData">批量删除选中项目</button>
    @endcan
@endsection
@section('toolbar')
    @can('writing_edit')
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    @endcan
    @can('writing_display')
   @{{#  if(d.is_display == '显示'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="display">禁止显示</a>
    @{{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="show">显示</a>
    @{{#  } }}
@endcan
    @can('writing_del')
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    @endcan
@endsection
@section('tableRender')
    <script>
        layui.use(['table','jquery','form'], function(){
            var table = layui.table;
            var $=layui.jquery;
            var form=layui.form;
            var category_id=$("#category_id").val();
            if(category_id!=''){
                $.get('/admin/writing/get_theme',{category_id:category_id},function (data) {
                    if(data!=''){
                        $("#select").html(data);
                        form.render('select');
                    }else{
                        $("#select").html('');
                    }
                })
            }
            var render=table.render({
                elem:"#table",
                page:true,
                id:'idTest',
                url:'{{route('admin.writing_ajaxList')}}',
                where:{searchKey:$("input[name='searchKey']").val(),searchTime:$("input[name='searchTime']").val(),
                category_id:$("#category_id").val(),
                theme_id:$("#theme_id").val(),
                is_display:$("#is_display").val()
                },
                height:400,
                cols:  [[ //标题栏
                    {checkbox:true,fixed:true},
                    {field: 'id', title: 'ID', width: 80}
                    ,{field: 'name', title: '作品名称', width: 200},
                    {field: 'category_id', title: '栏目', width: 80},
                    {field: 'theme_id', title: '主题', width: 100,templet:'#theme'},
                    {field: 'is_display', title: '是否显示', width: 100},
                    {field: 'author_id', title: '作者', width: 100,templet:"#author"},
                    {field: 'created_at', title: '创建时间', width: 150},
                    {field: 'updated_at', title: '修改时间', width: 150},
                    {fixed: 'right', width:250,title:'操作', align:'center', toolbar: '#toolbar'}
                    //这里的toolbar值是模板元素的选择器
                ]],
                response: {//返回格式自定义
                    statusName: 'code' //数据状态的字段名称，默认：code
                    ,statusCode: 0 //成功的状态码，默认：0
                    ,msgName: 'msg' //状态信息的字段名称，默认：msg
                    ,countName: 'total' //数据总数的字段名称，默认：count
                    ,dataName: 'data' //数据列表的字段名称，默认：data
                }
            });
            table.on('checkbox(table)', function(obj){
                console.log(obj)
            });
            //监听选择框
            form.on('select(select)', function(data){
                $.get('/admin/writing/get_theme',{category_id:data.value},function (data) {
                    if(data!=''){
                        $("#select").html(data);
                        form.render('select');
                    }else{
                        $("#select").html('');
                    }
                })
            });

            //上方
            var   active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('idTest')
                        ,data = checkStatus.data;
                    var str=[];
                    if(data==''){
                        layer.msg('请选中所删除的行',{icon:5})
                        return false;
                    }
                    for(var i=0;i<data.length;i++){
                        str.push(data[i].id);
                    }

                    layer.confirm('是否删除所选',function(index) {
                        $.get('/admin/writing/del', {id: str}, function (obj) {
                            if (obj.info == 'success') {
                                layer.msg('删除成功', {icon: 1});
                                render.reload();
                            } else {
                                layer.msg('网络繁忙', {icon: 5});
                            }

                        })
                    })

                },
                showAll: function(){ //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        ,data = checkStatus.data;
                    var str=[];
                    console.log(data);
                    if(data==''){
                        layer.msg('请选中所要显示的行',{icon:5})
                        return false;
                    }
                    for(var i=0;i<data.length;i++){
                        str.push(data[i].id);
                    }
                    layer.confirm('是否显示已屏蔽的作品',function(index){
                        layer.close(index);
                        //服务端发送审核指令
                        $.get('/admin/writing/display',{id:str,display:1},function(obj){
                            if(obj.info=='success'){
                                layer.msg('修改成功',{icon:1});
                                render.reload();
                            }else{
                                layer.msg('网络繁忙',{icon:5});
                            }

                        })
                    });

                }
                ,
                displayAll: function(){ //获取选中数目

                    var checkStatus = table.checkStatus('idTest')
                        ,data = checkStatus.data;
                    var str=[];
                    console.log(data);
                    if(data==''){
                        layer.msg('请选中所禁止显示的行',{icon:5})
                        return false;
                    }
                    for(var i=0;i<data.length;i++){
                        str.push(data[i].id);
                    }
                    layer.confirm('是否禁止作品显示',function(index){
                        layer.close(index);
                        //服务端发送审核指令
                        $.get('/admin/writing/display',{id:str,display:0},function(obj){
                            if(obj.info=='success'){
                                layer.msg('屏蔽成功',{icon:1});
                                render.reload();
                            }else{
                                layer.msg('网络繁忙',{icon:5});
                            }

                        })
                    });

                }
                ,isAll: function(){ //验证是否全选
                    var checkStatus = table.checkStatus('idTest');
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                }
            };
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            table.on('tool(table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if(layEvent === 'detail'){ //查看

                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.get('/admin/writing/del',{id:data.id},function(obj){
                            if(obj.info=='success'){
                                layer.msg('删除成功',{icon:1});
                            }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something
                    //同步更新缓存对应的值
                    location.href="/admin/writing/"+data.id+"/edit";
                }else if(layEvent === 'display'){
                    layer.confirm('是否禁止作品显示',function(index){
                        layer.close(index);
                        //服务端发送审核指令
                        $.get('/admin/writing/display',{id:data.id,display:0},function(obj){
                            if(obj.info=='success'){
                                layer.msg('屏蔽成功',{icon:1});
                                render.reload();
                            }else{
                                layer.msg('网络繁忙',{icon:5});
                            }

                        })
                    });

                }else if(layEvent=='show'){
                    layer.confirm('是否显示作品',function(index){
                        layer.close(index);
                        //服务端发送审核指令
                        $.get('/admin/writing/display',{id:data.id,display:1},function(obj){
                            if(obj.info=='success'){
                                layer.msg('修改成功',{icon:1});
                                render.reload();
                            }else{
                                layer.msg('网络繁忙',{icon:5});
                            }

                        })
                    });


                }
            });
        });
    </script>
@endsection

